@keyframes fx-animation-switch-dot-run-open {
  0% {
    width: 16px;
    transform: translateX(0);
  }
  45% {
    width: 20px;
    transform: translateX(0);
  }
  55% {
    width: 20px;
    transform: translateX(calc(40px - 16px - 4px - 4px));
  }
  100% {
    width: 16px;
    transform: translateX(calc(40px - 16px - 4px));
  }
}

@keyframes fx-animation-switch-dot-run-close {
  0% {
    width: 16px;
    transform: translateX(calc(40px - 16px - 4px));
  }
  45% {
    width: 20px;
    transform: translateX(calc(40px - 16px - 4px));
  }
  55% {
    width: 20px;
    transform: translateX(0);
  }
  100% {
    width: 16px;
    transform: translateX(0);
  }
}

@keyframes fx-animation-switch-wave {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes fx-animation-switch-click {
  from {
    box-shadow: 0 0 0 0 rgba(45, 183, 245, .2);
  }
  to {
    box-shadow: 0 0 0 5px rgba(45, 183, 245, .2);
  }
}

.fx-switch {
  display: inline-flex;
  cursor: pointer;
  height: 20px;
  line-height: 20px;

  &.disabled {
    cursor: not-allowed;
    opacity: 0.8;
  }

  > .out-left-text {
    margin-right: 10px;
  }

  > .out-right-text {
    margin-left: 10px;
  }

  > .switch-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    position: relative;
    transition: all 0.5s ease-in-out;
    font-size: 12px;

    &:active {
      animation: fx-animation-switch-click 0.3s;
    }

    > .inside-left-text {
      padding-left: 5px;
    }

    > .inside-right-text {
      padding-right: 5px;
    }

    > .dot {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      background-color: $color-white;
      position: absolute;
      top: 2px;
      left: 2px;

      &.open {
        animation: fx-animation-switch-dot-run-open 0.5s ease-in-out forwards;
      }

      &.close {
        animation: fx-animation-switch-dot-run-close 0.5s ease-in-out forwards;
      }

      > span {
        display: inline-block;
        width: 14px;
        height: 14px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid #47ebeb;
        animation: fx-animation-switch-wave 1.5s infinite ease;
        transform: scale(0);

        @for $i from 0 through 4 {
          &:nth-of-type(#{$i+1}) {
            animation-delay: 600ms*$i;
          }
        }
      }
    }
  }
}
